import React, { useState } from 'react'
import { NavBar, Input, Button } from '@nutui/nutui-react'
import { ArrowLeft, Tips } from '@nutui/icons-react'
import { useNavigate, useLocation } from 'react-router-dom'
import { getPhoneCode, verify } from '../../../request/instance'
export default function PwdSuccess() {
    // 获取登录的手机号和_id
    const { state: { phone, _id } } = useLocation()
    // 手机号
    const phoneString = phone.slice(0, 3) + '****' + phone.slice(7, 11)

    const marginStyle = {
        margin: "50px auto", width: '90%', background: "#97b97f", display: 'flex',
        justifyContent: 'center',
    }
    let navigate = useNavigate()
    const [dsd, setDsd] = useState(false)
    const [timer, setTimer] = useState(60)
    const [showtext, setShowTest] = useState('获取验证码')

    const [code, setcode] = useState('')
    // 获取验证码
    const getCode = async () => {
        setDsd(true)
        let timer = 60
        let outTimer = setInterval(() => {
            timer -= 1
            setTimer(timer)
            setShowTest(timer)
            if (timer <= 0) {
                setShowTest("获取验证码")
                clearTimeout(outTimer)
                setTimer(60)
                setDsd(false)
            }
        }, 1000)
        const res = await getPhoneCode('13068786927')
        console.log(res);
    }
    // 向后端发送请求进行验证输入是否正确
    const verifyCode = async () => {
        let { data } = await verify({ phoneNumber: '13068786927', code })
        if (data.code == 200) {
            navigate('/paypwd', { state: { code, phone, _id }, })
        } else {
            alert(data.message)
        }
    }
    return (
        <div style={{}}>
            <NavBar
                back={<ArrowLeft />}
                onBackClick={(e) => navigate('/show/mine')}
            >设置支付密码</NavBar>

            <div className="title"
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    marginTop: '.5rem',
                    justifyContent: 'center',
                    color: '#ccc',
                }}

            >设置支付密码,确保支付安全验证手机号码</div>
            <div className="phone"
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    background: '#fff',
                    padding: '0 10px',
                }}>
                <span>手机号</span>
                <Input readOnly placeholder={phoneString} />
            </div>
            <div
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    background: '#fff',
                    padding: '0 10px',
                }}
            >
                <span className='verification'>
                    验证码
                </span>
                <Input
                    placeholder="请输入短信验证码"
                    style={{ '--nutui-input-padding': '10px' }}
                    value={code}
                    onChange={(e) => setcode(e)}
                />
                <div className="right">
                    <Button type="default" size="small" onClick={getCode} disabled={dsd}>
                        {showtext}
                    </Button>
                </div>
            </div>
            {/* <span className='warning' style={{color:'red'}}>
                !!!!!!!!
                <br />
                短信验证码:1111
                <br />
                没事别点获取验证码
            </span> */}
            <Button style={marginStyle} type="primary" shape="square" onClick={verifyCode}>
                下一步
            </Button>
        </div>
    )
}
